<template>
  <div style="display: flex">
    <Tabs value="name1" class="out-container" v-model="index">
      <TabPane label="一级分类" name="name1">
        <Button type="success" @click="addOneType">添加一级商品分类</Button>
        <div class="table-container">
          <Table border :height="650" stripe :columns="getOneCols()" :data="tableOneData" no-data-text="未查询到数据">
          </Table>
        </div>
      </TabPane>
      <TabPane label="二级分类" name="name2">
        <Form :label-width="130" inline>
          <FormItem label="添加至">
            <Select v-model="oneType" style="width: 250px" @on-change="updateTwoTable">
              <Option v-for="(item,index) in tableOneData" :key="item.shopOneId" :value="item.shopOneId">
                {{ item.shopOneName }}
              </Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="success" @click="addTwoTypes">添加二级商品分类</Button>
          </FormItem>
        </Form>
        <div class="table-container">
          <Table border :height="650" stripe :columns="getTwoCols()" :data="tableTwoData" no-data-text="未查询到数据">
          </Table>
        </div>
      </TabPane>
      <TabPane label="三级分类" name="name3">
        <Form :label-width="130" inline>
          <FormItem label="添加至">
            <Select v-model="twoType" style="width: 250px" @on-change="updateThreeTable">
              <Option v-for="(item,index) in twoAllData" :key="item.shopTwoId" :value="item.shopTwoId">
                {{ item.shopTwoName }}
              </Option>
            </Select>
          </FormItem>
          <FormItem>
            <Button type="success" @click="addThreeTypes">添加三级商品分类</Button>
          </FormItem>
        </Form>
        <div class="table-container">
          <Table border :height="650" stripe :columns="getThreeCols()" :data="tableThreeData" no-data-text="未查询到数据">
          </Table>
        </div>
      </TabPane>
    </Tabs>

    <Modal v-model="isShowOneAdd" title="新增一级菜单" @on-ok="addOnetype">
      <label>一级菜单名</label><Input v-model="one.name"/>
    </Modal>

    <Modal v-model="showOneUpdateModel" title="修改一级菜单" @on-ok="updateOneName">
      <label>一级菜单名</label><Input v-model="oneTypeData.shopOneName"/>
    </Modal>

    <Modal v-model="isShowTwoAdd" title="新增二级菜单" @on-ok="addTwotype">
      <label>二级菜单名</label><Input v-model="two.name"/>
    </Modal>

    <Modal v-model="showTwoUpdateModel" title="修改二级菜单" @on-ok="updateTwoName">
      <label>二级菜单名</label><Input v-model="twoTypeData.shopTwoName"/>
    </Modal>

    <Modal v-model="isShowThreeAdd" title="新增三级菜单" @on-ok="addThreeType">
      <label>三级菜单名</label><Input v-model="three.name"/>
    </Modal>

    <Modal v-model="showThreeUpdateModel" title="修改三级菜单" @on-ok="updateThreeName">
      <label>三级菜单名</label><Input v-model="threeTypeData.shopThreeName"/>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "type",
  mounted() {
    this.loadData(0)
  },
  data() {
    return {
      index: 'name1',
      tableOneData: [],
      isShowOneAdd: false,
      one: {
        name: ''
      },
      two: {
        name: ''
      },
      three: {
        name: ''
      },
      showOneUpdateModel: false,
      oneTypeData: {},
      TwoTypeData: {},
      tableTwoData: [],
      isShowTwoAdd: false,
      showTwoUpdateModel: false,
      twoTypeData: {},
      oneType: '',
      twoAllData: [],
      isShowThreeAdd: false,
      showThreeUpdateModel: false,
      threeTypeData: {},
      twoType: '',
      tableThreeData: []
    }
  },
  watch: {
    index(val) {
      if (val === "name1") {
        this.loadData(0)
      }
      if (val === "name2") {
        //加载一级下拉框
        this.loadData(1)
      }
      if (val === "name3") {
        //加载二级下拉框
        this.loadTwoAllData();
        this.loadData(2)
      }
    }
  },
  methods: {
    loadData(type) {
      let that = this;
      if (type === 0) {
        that.$http.get('/goods/query/type1').then(res => {
          that.tableOneData = res ? res : []
        }).catch(() => {
          that.tableOneData = []
        })
      } else if (type === 1) {
        that.$http.get('/goods/query/type2?oneId=' + this.oneType).then(res => {
          that.tableTwoData = res ? res : []
        }).catch(() => {
          that.tableTwoData = []
        })
      } else if (type === 2) {
        that.$http.get('/goods/query/type3?twoId=' + this.twoType).then(res => {
          that.tableThreeData = res ? res : []
        }).catch(() => {
          that.tableThreeData = []
        })
      }
    },
    loadTwoAllData() {
      let that = this;
      that.$http.get('/goods/two/all').then(res => {
        that.twoAllData = res
      }).catch(() => {
        that.twoAllData = []
      })
    },
    updateTwoTable(val) {
      this.loadData(1)
    },
    getTwoCols() {
      let that = this;
      return [
        {title: '二级菜单ID', key: 'shopTwoId', tooltip: true, align: 'center', width: 150},
        {title: '二级菜单名字', key: 'shopTwoName', tooltip: true, align: 'center'},
        {
          title: '二级菜单图片', key: 'shopTwoPicture', tooltip: true, align: 'center', width: 300, render(h, obj) {
            return obj.row.shopTwoPicture ? h(('img'), {
              attrs: {
                src: obj.row.shopTwoPicture,
                style: 'max-width:100%;max-height:100%'
              }
            }) : ''
          }
        },
        {title: '创建时间', key: 'shopTwoCreatime', tooltip: true, align: 'center'},
        {
          title: '菜单状态', key: 'shopTwoStatus', tooltip: true, align: 'center', width: 150, render(h, obj) {
            return h(('Button'), {
              attrs: {type: obj.row.shopTwoStatus === "1" ? "success" : "error"}, on: {
                click() {
                  that.upDownTwo(obj.row)
                }
              }
            }, obj.row.shopTwoStatus === "1" ? "启用" : "禁用")
          }
        },
        {
          title: '更新信息', key: 'operator', tooltip: true, align: 'center', width: 200, render(h, obj) {
            return h(('Button'), {
              attrs: {type: "success"}, on: {
                click() {
                  that.showTwoUpdate(obj.row)
                }
              }
            }, '修改菜单名字')
          }
        }
      ]
    },
    getThreeCols() {
      let that = this;
      return [
        {title: '三级菜单ID', key: 'shopThreeId', tooltip: true, align: 'center', width: 150},
        {title: '三级菜单名字', key: 'shopThreeName', tooltip: true, align: 'center'},
        {
          title: '三级菜单图片', key: 'shopThreePicture', tooltip: true, align: 'center', width: 300, render(h, obj) {
            return obj.row.shopThreePicture ? h(('img'), {
              attrs: {
                src: obj.row.shopThreePicture,
                style: 'max-width:70px;max-height:50px'
              }
            }) : ''
          }
        },
        {title: '创建时间', key: 'shopThreeCreatime', tooltip: true, align: 'center'},
        {
          title: '菜单状态', key: 'shopThreeStatus', tooltip: true, align: 'center', width: 150, render(h, obj) {
            return h(('Button'), {
              attrs: {type: obj.row.shopThreeStatus === "1" ? "success" : "error"}, on: {
                click() {
                  that.upDownThree(obj.row)
                }
              }
            }, obj.row.shopThreeStatus === "1" ? "启用" : "禁用")
          }
        },
        {
          title: '更新信息', key: 'operator', tooltip: true, align: 'center', width: 200, render(h, obj) {
            return h(('Button'), {
              attrs: {type: "success"}, on: {
                click() {
                  that.showThreeUpdate(obj.row)
                }
              }
            }, '修改菜单名字')
          }
        }
      ]
    },
    getOneCols() {
      let that = this;
      return [
        {title: '一级菜单ID', key: 'shopOneId', tooltip: true, align: 'center', width: 150},
        {title: '一级菜单名字', key: 'shopOneName', tooltip: true, align: 'center'},
        {
          title: '一级菜单图片', key: 'shopOnePicture', tooltip: true, align: 'center', width: 300, render(h, obj) {
            return obj.row.shopOnePicture ? h(('img'), {
              attrs: {
                src: obj.row.shopOnePicture,
                style: 'max-width:100%;max-height:100%'
              }
            }) : ''
          }
        },
        {title: '创建时间', key: 'shopOneCreatime', tooltip: true, align: 'center'},
        {
          title: '菜单状态', key: 'shopOneStatus', tooltip: true, align: 'center', width: 150, render(h, obj) {
            return h(('Button'), {
              attrs: {type: obj.row.shopOneStatus === "1" ? "success" : "error"}, on: {
                click() {
                  that.upDownOne(obj.row)
                }
              }
            }, obj.row.shopOneStatus === "1" ? "启用" : "禁用")
          }
        },
        {
          title: '菜单状态', key: 'operator', tooltip: true, align: 'center', width: 200, render(h, obj) {
            return h(('Button'), {
              attrs: {type: "success"}, on: {
                click() {
                  that.showOneUpdate(obj.row)
                }
              }
            }, '修改菜单名字')
          }
        }
      ]
    },
    addOneType() {
      this.isShowOneAdd = true
    },
    addTwoTypes() {
      this.isShowTwoAdd = true
    },
    showOneUpdate(row) {
      this.showOneUpdateModel = true
      this.oneTypeData = row
    },
    showTwoUpdate(row) {
      this.showTwoUpdateModel = true
      this.twoTypeData = row
    },
    updateOneName() {
      let that = this;
      let params = {
        shopOneId: this.oneTypeData.shopOneId,
        shopOneName: this.oneTypeData.shopOneName
      }
      that.$http.postJson('/goods/update/one', params).then(() => {
        that.$Message.success("修改一级菜单成功");
        that.loadData(0)
      }).catch(() => {
        that.$Message.error("修改一级菜单失败");
      })
    },
    updateTwoName() {
      let that = this;
      let params = {
        shopTwoId: this.twoTypeData.shopTwoId,
        shopTwoName: this.twoTypeData.shopTwoName
      }
      that.$http.postJson('/goods/update/two', params).then(() => {
        that.$Message.success("修改二级菜单成功");
        that.loadData(1)
      }).catch(() => {
        that.$Message.error("修改二级菜单失败");
      })
    },
    upDownOne(row) {
      let that = this;
      let params = {
        shopOneId: row.shopOneId,
        shopOneStatus: row.shopOneStatus === "1" ? "2" : "1"
      }
      that.$http.postJson('/goods/delete/one', params).then(() => {
        that.$Message.success("修改一级菜单状态成功");
        that.loadData(0)
      }).catch(() => {
        that.$Message.error("修改一级菜单状态失败");
      })
    },
    upDownTwo(row) {
      let that = this;
      let params = {
        shopTwoId: row.shopTwoId,
        shopTwoStatus: row.shopTwoStatus === "1" ? "2" : "1"
      }
      that.$http.postJson('/goods/delete/two', params).then(() => {
        that.$Message.success("修改二级菜单状态成功");
        that.loadData(1)
      }).catch(() => {
        that.$Message.error("修改二级菜单状态失败");
      })
    },
    addOnetype() {
      let that = this;
      that.$http.postForm('/goods/add/one', `name=${this.one.name}`).then(() => {
        that.$Message.success("添加一级菜单成功");
        that.loadData(0)
      }).catch(() => {
        that.$Message.error("添加一级菜单失败");
      })
    },
    addTwotype() {
      let that = this;
      that.$http.postForm('/goods/add/two', `name=${this.two.name}&oneId=${this.oneType}`).then(() => {
        that.$Message.success("添加二级菜单成功");
        that.loadData(1)
      }).catch(() => {
        that.$Message.error("添加二级菜单失败");
      })
    },
    addThreeType() {
      let that = this;
      that.$http.postForm('/goods/add/three', `name=${this.three.name}&twoId=${this.twoType}`).then(() => {
        that.$Message.success("添加三级菜单成功");
        that.loadData(2)
      }).catch(() => {
        that.$Message.error("添加三级菜单失败");
      })
    },
    addThreeTypes() {
      this.isShowThreeAdd = true
    },
    updateThreeName() {
      let that = this;
      let params = {
        shopThreeId: this.threeTypeData.shopThreeId,
        shopThreeName: this.threeTypeData.shopThreeName
      }
      that.$http.postJson('/goods/update/three', params).then(() => {
        that.$Message.success("修改三级级菜单成功");
        that.loadData(2)
      }).catch(() => {
        that.$Message.error("修改三级菜单失败");
      })
    },
    upDownThree(row) {
      let that = this;
      let params = {
        shopThreeId: row.shopThreeId,
        shopThreeStatus: row.shopThreeStatus === "1" ? "2" : "1"
      }
      that.$http.postJson('/goods/delete/three', params).then(() => {
        that.$Message.success("修改三级菜单状态成功");
        that.loadData(2)
      }).catch(() => {
        that.$Message.error("修改二级菜单状态失败");
      })
    },
    showThreeUpdate(row) {
      this.showThreeUpdateModel = true
      this.threeTypeData = row
    },
    updateThreeTable() {
      this.loadData(2)
    }
  }
}
</script>

<style scoped>
.out-container {
  width: calc(100% - 40px);
  margin: 10px auto 0 auto;
}

.table-container {
  margin: 20px auto;
  width: 100%;
}
</style>
